// navigation.js - 导航功能实现

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('.nav-link');
    
    // 为每个导航链接添加点击事件
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            // 阻止默认的锚点跳转行为
            e.preventDefault();
            
            // 获取链接的href属性
            const targetPage = this.getAttribute('href');
            
            // 如果href不为空且不是#，则加载页面
            if (targetPage && targetPage !== '#') {
                loadPage(targetPage);
            }
        });
    });
});

// 加载页面的函数
function loadPage(pageUrl) {
    // 这里可以根据实际需求实现页面加载逻辑
    // 以下是几种常见的实现方式：
    
    // 方法1: 直接跳转到新页面
    window.location.href = pageUrl;
    
    // 方法2: 使用AJAX加载内容（单页应用）
    /*
    fetch(pageUrl)
        .then(response => response.text())
        .then(html => {
            document.getElementById('content').innerHTML = html;
            // 更新浏览器历史记录
            history.pushState({page: pageUrl}, '', pageUrl);
        })
        .catch(err => console.error('加载页面失败:', err));
    */
    
    // 方法3: 根据URL显示/隐藏不同内容区块
    /*
    document.querySelectorAll('.page-section').forEach(section => {
        section.style.display = 'none';
    });
    document.querySelector(pageUrl).style.display = 'block';
    */
}